<template>
  <div class="main">
    <el-header>
      <div class="header-leftbox1">
        <img :src="avaterImg" alt="" />
        <span>我的订单</span>
      </div>
      <div class="header-right">
        <el-button type="info" @click="logout">返回首页</el-button>
      </div>
    </el-header>
    <div class="orderMain">
      <div class="myorder">
        <h3>我的订单</h3>
      </div>
      <div class="orderList-box">
        <div class="listTitle">
          <div class="menuBox">
            <el-menu
              :default-active="activeIndex"
              mode="horizontal"
              @select="handleSelect"
              :ellipsis="false"
            >
              <el-menu-item index="1" @click="activeIndex = 1"
                >全部订单</el-menu-item
              >
              <el-menu-item index="2" @click="activeIndex = 2"
                >待付款</el-menu-item
              >
              <el-menu-item index="3" @click="activeIndex = 3"
                >待收货</el-menu-item
              >
              <el-menu-item index="4" @click="activeIndex = 4"
                >待评价</el-menu-item
              >
              <el-menu-item index="5" @click="activeIndex = 5"
                >已完成</el-menu-item
              >
            </el-menu>
          </div>
          <div class="searchBox">
            <el-input v-model="input" placeholder="订单号">
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </div>
        </div>
        <div
          class="listcontent"
          v-show="activeIndex == items.activeIndex"
          v-for="items in menuContentList"
          :key="items"
        >
          <div class="empty" v-if="items.orderInfoList.length === 0">
            <el-empty description="暂无订单" />
          </div>
          <div v-if="!(items.orderInfoList.length === 0)">
            <div
              class="orderItemBox"
              v-for="item in items.orderInfoList"
              :key="item"
            >
              <div class="topBox">
                <span>下单时间：{{ item.createdTime }}</span>
                <span>订单编号：{{ item.serialNo }}</span>
              </div>
              <div class="orderMainBox">
                <div class="imageBox">
                  <div class="image">
                    <img
                      v-for="items in item.orderItemList"
                      :key="items"
                      :src="items.defaultImage"
                      alt=""
                    />
                  </div>
                  <div class="noBox">共{{ orderItemLen(item.serialNo) }}件</div>
                </div>
                <div class="statusBox">
                  {{ item.orderStatus }}
                </div>
                <div class="viewDetailBox">
                  <el-button @click="viewDetail(item)">查看详情</el-button>
                  <el-button
                    v-if="item.orderStatus === '待付款'"
                    @click="toPayPage(item)"
                    >去支付</el-button
                  >
                  <el-button
                    v-if="item.orderStatus === '待评价'"
                    @click="evaluteOrder(item)"
                    >评价</el-button
                  >
                  <el-button
                    v-if="item.orderStatus === '待付款'"
                    @click="cancleOrderInfo(item.serialNo)"
                    >取消订单</el-button
                  >
                  <el-button
                    v-if="item.orderStatus === '待收货'"
                    @click="confrimReciveGood(item.serialNo)"
                    >确认收货</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 评价抽屉 -->
    <el-drawer
      v-model="dialogEvaluate"
      :direction="direction"
      :before-close="handleClose"
      size="100%"
    >
      <div class="evaluteBox">
        <h3>评价商品</h3>
        <span>快乐的你分享完美使用心得~</span>
        <div class="container">
          <div class="list-item">
            <div class="leftContent">
              <div class="left" v-for="item in evaluteGoodInfo" :key="item">
                <div class="image">
                  <img :src="item.defaultImage" alt="" />
                </div>
                <div class="desc">
                  {{ item.skuName }}
                </div>
                <div class="price">
                  <span>￥</span>{{ item.originalPrice }}<span>.00</span>
                </div>
              </div>
            </div>
            <div class="rightContent">
              <div
                class="right"
                v-for="(item, index) in evaluatFormList"
                :key="item"
              >
                <div class="star-box">
                  <i
                    class="iconfont icon-kongxinwujiaoxing"
                    v-for="sum in starCount"
                    :key="sum"
                    :class="
                      sum <= item.tempScore
                        ? 'icon-shixinwujiaoxing'
                        : 'icon-kongxinwujiaoxing'
                    "
                    @mouseenter="item.tempScore = sum"
                    @mouseleave="item.tempScore = item.score"
                    @click="item.score = sum"
                    aria-hidden="true"
                  ></i>
                  <span>{{ item.score }}分</span>
                </div>
                <div class="eveluateTxt">
                  <el-input
                    v-model="item.stringEvaluation"
                    placeholder="请输入评价内容"
                    type="textarea"
                    rows="6"
                    maxlength="400"
                    show-word-limit
                  ></el-input>
                </div>
                <div class="btnBox" @click="judgeIndex(index)">
                  <el-upload
                    class="avatar-uploader"
                    list-type="picture-card"
                    :http-request="imageUpload"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <i class="iconfont icon-xiangji"></i>
                    <span>上传图片</span>
                  </el-upload>

                  <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                  </el-dialog>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="subBtnBox">
          <span @click="submitEvaluteInfo">提交评价</span>
        </div>
      </div>
    </el-drawer>
    <footer-view></footer-view>
  </div>
</template>
<script>
import { Search } from "@element-plus/icons-vue";
import avaterImg from "../../assets/image/avaterDemo.jpg";
import {
  orderInfoList,
  removeOrderInfo,
  uploadFile,
  saveEvaluateInfo,
  confirmReceiveGoods,
} from "@/api/user";
export default {
  data() {
    return {
      avaterImg: avaterImg,
      tempScore: 1,
      score: 1,
      count: 5,
      evaluatText: "",
      dialogEvaluate: false,
      activeIndex: "1",
      evaluateDiaOrNum: "",
      evaluateDiaOrTime: "",
      allTableData: [],
      starCount: 5,
      evaluatFormList: [],
      evaluteGoodInfo: {},
      menuContentList: [
        { activeIndex: 1, orderInfoList: [] },
        { activeIndex: 2, orderInfoList: [] },
        { activeIndex: 3, orderInfoList: [] },
        { activeIndex: 4, orderInfoList: [] },
        { activeIndex: 5, orderInfoList: [] },
        { activeIndex: 6, orderInfoList: [] },
      ],
      imageFileTmpFormData: new FormData(),
      choseIndex: 0,
      orderNo: "",
    };
  },
  computed: {},
  setup() {
    return {
      Search,
    };
  },
  mounted() {
    this.getMyOrderList();
    this.init();
  },
  methods: {
    init() {
      let userInfo = this.$store.getters.getUserInfo;
      console.log(userInfo);
      if (userInfo.avatar) {
        this.avaterImg = userInfo.avatar;
      }
    },
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/home");
    },
    handleClose() {
      this.dialogEvaluate = !this.dialogEvaluate;
      this.evaluatList.forEach((item) => {
        this.evaluatText = "";
        item.tempScore = 0;
        item.score = 0;
      });
    },
    /**
     * 删除订单
     */
    cancleOrderInfo(serialNo) {
      let msg = "你确定要删除该订单吗?";
      // 弹出一个框，用来提示用户是否确定删除
      this.$confirm(msg, "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          removeOrderInfo(serialNo).then((res) => {
            if (res.code === 0) {
              this.$message.success("删除成功");
              this.getMyOrderList();
              window.location.reload();
            }
          });
        })
        .catch(() => {
          console.log("cancel");
        });
    },
    /**
     * 获取我的订单信息
     */
    getMyOrderList() {
      orderInfoList().then((res) => {
        if (res.code === 0) {
          this.allTableData = res.page.list;
          this.menuContentList[0].orderInfoList = res.page.list;
          this.allTableData.forEach((item) => {
            if (item.orderStatus === "pendingPayment") {
              item.orderStatus = "待付款";
              this.menuContentList[1].orderInfoList.push(item);
            } else if (item.orderStatus === "pendingReceipt") {
              item.orderStatus = "待收货";
              this.menuContentList[2].orderInfoList.push(item);
            } else if (item.orderStatus === "pendingEvaluation") {
              item.orderStatus = "待评价";
              this.menuContentList[3].orderInfoList.push(item);
            } else if (item.orderStatus === "finished") {
              item.orderStatus = "已完成";
              this.menuContentList[4].orderInfoList.push(item);
            } else if (item.orderStatus === "cancel") {
              item.orderStatus = "已取消";
              this.menuContentList[5].orderInfoList.push(item);
            }
          });
        }
      });
    },
    // 计算订单项个数
    orderItemLen(serialNo) {
      let num = 0;
      this.allTableData.forEach((item) => {
        if (item.serialNo === serialNo) {
          num = item.orderItemList.length;
        }
      });
      return num;
    },
    // 查看订单详情
    viewDetail(orderInfo) {
      console.log(orderInfo);
      sessionStorage.setItem("orderInfo", JSON.stringify(orderInfo));
      this.$router.push("/orderDetail");
    },
    // 评价订单
    evaluteOrder(orderInfo) {
      this.orderNo = orderInfo.serialNo;
      this.evaluteGoodInfo = orderInfo.orderItemList;
      this.evaluteGoodInfo.forEach((item) => {
        let itemInfo = {
          serialNo: item.serialNo,
          score: 0,
          formatEvaluationModel: {
            imageList: [],
          },
          tempScore: 0,
          stringEvaluation: "",
        };

        this.evaluatFormList.push(itemInfo);
      });
      console.log(this.evaluatFormList);
      this.dialogEvaluate = true;
    },
    // 去支付订单
    toPayPage(orderInfo) {
      sessionStorage.setItem("orderInfo", JSON.stringify(orderInfo));
      this.$router.push("/payPage");
    },
    /**
     * 评价图片上传
     */

    imageUpload() {
      uploadFile(this.imageFileTmpFormData).then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.evaluatFormList[
            this.choseIndex
          ].formatEvaluationModel.imageList.push(res.url);
        }
      });
    },
    handleAvatarSuccess(jsonData, file) {
      console.log(jsonData);
    },
    beforeAvatarUpload(file, index) {
      console.log(file, index);
      if (file) {
        this.imageFileTmpFormData.set("file", file);
      } else {
        return false;
      }
    },
    /**
     * 判断上传的那个评价
     */
    judgeIndex(index) {
      console.log(index);
      this.choseIndex = index;
    },
    /**
     * 提交评价
     */
    submitEvaluteInfo() {
      let orderNo = this.orderNo;
      console.log(this.evaluatFormList, orderNo);
      saveEvaluateInfo(this.evaluatFormList, orderNo).then((res) => {
        if (res.code === 0) {
          this.$message.success("评价完成");
          this.dialogEvaluate = false;
        }
      });
    },
    /**
     * 确认收货
     */
    confrimReciveGood(serialNo) {
      let msg = "确定订单已完成？确定收货？";
      // 弹出一个框，用来提示用户是否确定删除
      this.$confirm(msg, "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          confirmReceiveGoods(serialNo).then((res) => {
            if (res.code === 0) {
              this.$message.success("确认收货");
              window.location.reload();
            }
          });
        })
        .catch(() => {
          console.log("cancel");
        });
    },
  },
};
</script>

<style lang="scss">
.main {
  background-color: #f5f5f5;
  .el-header {
    background-color: #f6fbf6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    .header-leftbox1 {
      display: flex;
      align-items: center;
      img {
        height: 30px;
        width: 30px;
        margin: 0 20px;
        border-radius: 50%;
        border: 1px solid #244d4d;
        box-shadow: 1px 1px #ededf1;
      }
      span {
        color: #244d4d;
        font-size: 30px;
        font-weight: bold;
      }
    }
    .header-right {
      display: flex;
      align-items: center;
      .el-button {
        font-weight: bold;
        background-color: #244d4d;
      }
    }
  }
  .orderMain {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    .myorder {
      margin: 20px 0;
      padding: 0 30px;
      width: 1200px;
      height: 80px;
      background-color: #fff;
      display: flex;
      align-items: center;
      h3 {
        font-size: 15px;
        color: #666;
        line-height: 18px;
      }
    }
    .orderList-box {
      min-height: 600px;
      background-color: #fff;
      width: 1200px;
      display: flex;
      flex-direction: column;
      padding: 20px 20px 200px 20px;
      align-items: center;
      .listTitle {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        .searchBox {
          .el-input__inner {
            width: 200px;
            border-radius: 0;
          }
        }
      }
      .listcontent {
        width: 100%;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        .empty {
          display: flex;
          width: 100%;
          justify-content: center;
          align-items: center;
        }
        .orderItemBox {
          .topBox {
            span {
              margin-right: 40px;
              font-size: 14px;
              color: #111;
            }
          }
          .orderMainBox {
            margin: 10px 0;
            border: 1px solid #dfdfdf;
            min-height: 180px;
            display: flex;
            align-items: center;
            .imageBox {
              display: flex;
              width: 800px;
              height: 180px;
              justify-content: space-between;
              align-items: center;
              border-right: 1px solid #dfdfdf;
              .image {
                img {
                  height: 100px;
                  width: 100px;
                  margin: 0 0 0 10px;
                }
              }
              .noBox {
                font-size: 14px;
                color: #515a6e;
                margin-right: 15px;
              }
            }
            .statusBox {
              width: 150px;
              height: 180px;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #515a6e;
              font-weight: 700;
              border-right: 1px solid #dfdfdf;
            }
            .viewDetailBox {
              display: flex;
              align-items: center;
              justify-content: center;
              flex: 1;
              padding: 0 10px;
              .el-button {
                margin-top: 10px;
                border: 0;
                border-radius: 20px;
                background-color: #f5f5f5;
                color: #244d4d;
                font-weight: 700;
                width: 110px;
                height: 40px;
                font-size: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                &:hover {
                  background-color: #244d4d;
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
}
.evaluteBox {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  h3 {
    font-size: 20px;
    margin: 20px 0;
  }
  span {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .container {
    display: flex;
    width: 80%;
    flex-direction: column;
    .list-item {
      display: flex;
      width: 100%;
      border: 1px solid #e0e0e0;
      margin: 10px 0;
      .leftContent {
        display: flex;
        flex-direction: column;
        border-right: 1px solid #f5f5f5;
        .left {
          width: 400px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          border-bottom: 1px solid #f5f5f5;
          padding: 60px;
          .image {
            height: 150px;
            width: 150px;
            img {
              height: 100%;
              width: 100%;
            }
          }
          .desc {
            font-size: 14px;
            color: #111;
            font-weight: 700;
            margin: 20px 0;
          }
          .price {
            font-size: 18px;
            font-weight: 700;
            display: flex;
            align-items: flex-start;
            span {
              font-size: 12px;
            }
          }
        }
      }
      .rightContent {
        display: flex;
        flex-direction: column;
        width: 100%;
        .right {
          flex: 1;
          padding: 20px 0 20px 60px;
          border-bottom: 1px solid #f5f5f5;
          .star-box {
            min-height: 40px;
            display: flex;
            align-items: center;
            span {
              font-size: 14px;
              color: #aaa;
              margin-left: 5px;
            }
          }
          .eveluateTxt {
            width: 90%;
            margin: 20px 0;
          }
          .btnBox {
            .el-upload--picture-card {
              width: 60px;
              height: 60px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              span {
                font-size: 12px;
                color: #aaa;
              }
            }
          }
          .saveBox {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            margin-top: -27px;
            padding: 20px;
            .el-button {
              margin-top: 10px;
              border: 0;
              border-radius: 20px;
              background-color: #f5f5f5;
              color: #244d4d;
              font-weight: 700;
              width: 110px;
              height: 40px;
              font-size: 16px;
              display: flex;
              align-items: center;
              justify-content: center;
              &:hover {
                background-color: #244d4d;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
  .subBtnBox {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0;
    width: 80%;
    margin-top: 10px;
    span {
      display: flex;
      cursor: pointer;
      background-color: #244d4d;
      color: #fff;
      font-weight: 700;
      width: 200px;
      align-items: center;
      justify-content: center;
      height: 40px;
    }
  }
}
</style>
